<template>
	<div :class="`header f20 ${userStore.isLoggedIn ? 'count_true header_w' : ''}`">
		<div class="inner">
			<div class="in flex">
				<div class="logo">
					<NuxtLink to="/"><img src="@/public/uploadfiles/logo.png" alt="" /></NuxtLink>
				</div>
				<div class="hdr flex">
					<div class="menu overscroll">
						<ul class="flex">
							<li v-for="(item, index) in navList" :key="index" :class="active == index ? 'active' : ''">
								<NuxtLink @click="toLink(item.outlink)">{{ item.name }}</NuxtLink>

								<div class="sub" v-if="item.subcategories && item.subcategories.length > 0">
									<dl>
										<dd v-for="(sub, subIndex) in item.subcategories" :key="subIndex">
											<NuxtLink @click="toLink(sub.outlink)">{{ sub.name }}</NuxtLink>
										</dd>
									</dl>
								</div>
							</li>

							<!-- li :class="active==0?'active':''">
                                <NuxtLink to="/">Home</NuxtLink>
                            </li>
                            <li :class="active==1?'active':''">
                                <NuxtLink to="/Manufacturers">Databases</NuxtLink>
                                <div class="sub">
                                    <dl>
                                        <dd><NuxtLink to="/Manufacturers">Manufacturers</NuxtLink></dd>
                                        <dd><NuxtLink to="/Products">Products</NuxtLink></dd>
                                        <dd><NuxtLink to="/Apis">Active Pharmaceutical Ingredient (APl)</NuxtLink></dd>
                                    </dl>
                                </div> 
                            </li>
                            <li :class="active==2?'active':''">
                                <NuxtLink to="/Tools">Tools</NuxtLink>
                                <div class="sub">
                                    <dl>
                                        <dd><NuxtLink to="/Tools">Risk Matrix</NuxtLink></dd>
                                        <dd><NuxtLink to="/Tools/Graph">Manufacturer-ProductAPI Graph</NuxtLink></dd>
                                        <dd><NuxtLink to="/">Active Pharmaceutical Ingredient (APl)</NuxtLink></dd>
                                    </dl>
                                </div>
                            </li>
                            <li :class="active==3?'active':''">
                                <NuxtLink to="/News">News</NuxtLink>
                            </li>
                            <li :class="active==4?'active':''">
                                <NuxtLink to="/About">About</NuxtLink>
                                <div class="sub">
                                    <dl>
                                        <dd><NuxtLink to="/About">About AITEP</NuxtLink></dd>
                                        <dd><NuxtLink to="/About/AboutUs">About Us</NuxtLink></dd>
                                        <dd><NuxtLink to="/About/OD">Origins and Development</NuxtLink></dd>
                                        <dd><NuxtLink to="/About/System">AITEP System</NuxtLink></dd>
                                        <dd><NuxtLink to="/About/PDE">Overview of PDE Report Generation</NuxtLink></dd>
                                        <dd><NuxtLink to="/About/Source">Source</NuxtLink></dd>
                                    </dl>
                                </div>
                            </li>
                            <li :class="active==5?'active':''">
                                <NuxtLink to="/Help">Help</NuxtLink>
                                <div class="sub">
                                    <dl>
                                        <dd><NuxtLink to="/Help/Guide">User Guide</NuxtLink></dd>
                                        <dd><NuxtLink to="/Help">Contact Us</NuxtLink></dd>
                                    </dl>
                                </div>
                            </li> -->
						</ul>
					</div>
					<div class="htool f18 flex" v-if="userInfo.username">
						<div class="lang" style="margin-left: 0;">
							<NuxtLink to="/member">

								<img class="cur" :src="userInfo.avatar" style="
                  min-width: 40px;
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  margin-right: 10px;
                " />
							</NuxtLink>

							<div class="drp">
								<dl>
									<dd style="color: #000">{{ userInfo.username }}</dd>
									<dd style="color: #000" v-if="userInfo.createtime">
										{{getTimeStr(userInfo.createtime)}}
									</dd>
								</dl>
							</div>
						</div>
						<div style="width: 70px; min-width: 70px; cursor: pointer" @click="toOut">
							退出
						</div>
					</div>
					<div class="htool f18 flex" v-else>
						<NuxtLink to="/login">登入</NuxtLink>
						<NuxtLink to="/login/register">注册</NuxtLink>
					</div>
					<div class="lang f18">
						<div class="cur">繁体</div>
						<div class="drp">
							<dl>
								<dd><a href="">繁体</a></dd>
								<dd><a @click="toEn">EN</a></dd>
							</dl>
						</div>
					</div>
					<div class="robot f18" @click="robotClick">
						<img src="@/public/uploadfiles/logo.png" alt="" />
					</div>
					<div class="openMenu"><i></i></div>
				</div>
			</div>
		</div>

		<el-drawer v-model="showRobot" title=" " direction="rtl" size="500">
			<div class="Chat">
				<div class="Chat_head">
					<p class="f16">
						<span class="hello">Hello,</span> SugarsWeet! Chatting in
						progress...
					</p>
				</div>

				<div class="Chat_content" id="scrollContainer">
					<!-- <div class="me_box">
						<div class="me fl6">
							<p>Email: zhangyf@cuhk.edu.hk</p>
						</div>
					</div> -->
					<div class="Chat_box">
						<div class="Chat_info">
							<img src="@/public/uploadfiles/logo.png" class="Chat_icon" alt="" />
							<p class="f16 Chat_name">AITEP</p>
						</div>
						<p class="f16">Hello, SugarsWeet,What can I do to help you?</p>
					</div>

					<div v-for="(item, index) in historyList" :key="index">
						<div class="me_box" v-if="item.type == 1">
							<div class="me fl6">
								<p>{{ item.value }}</p>
							</div>
						</div>
						<div class="Chat_box" v-if="item.type == 2">
							<div class="Chat_info">
								<img src="@/public/uploadfiles/logo.png" class="Chat_icon" alt="" />
								<p class="f16 Chat_name">AITEP</p>
							</div>
							<p class="f16">{{ item.value }}</p>
						</div>
					</div>
				</div>
				<div class="Chat_bottom">
					<div class="Chat_btn">
						<div class="btn_box" @click="chatClick">
							<img src="/public/images/chat.png" />
							Chat with web pages
						</div>
						<div :class="`Summarize ${SummarizeShow ? 'Summarize_show' : ''}`">
							<div class="Chat_link">
								<img src="@/public/uploadfiles/logo.png" class="Chat_icon" alt="" />
								<div class="link_info">
									<p class="f16 Chat_name">AITEP</p>
									<p class="f16">
										http://aitep.drugsea.com/home/APlist/Detail/A00278
									</p>
								</div>
							</div>
							<div class="btn_box">
								<img src="/public/images/chat1.png" />
								Summarize
							</div>
						</div>
					</div>
					<div class="Chat_input">
						<el-input placeholder="Press' Ctrl+'to quickly ask a question ..." :rows="3" type="textarea"
							:maxRows="3" resize="none" @keyup.enter="toSend" v-model="message" />
						<div class="sending" @click="toSend">
							<img src="/images/sending.png" class="sending_btn" />
						</div>
					</div>
				</div>
			</div>
			<!-- <div>
				<div v-for="(item,index) in historyList" :key="index">
					{{item}}
				</div>
				 <el-input
				      v-model="message"
				      style="max-width: 600px"
				      placeholder="Please input"
				    >
				      <template #append>
						  
						  <div @click="toSend">发�/div>
					  </template>
				    </el-input>
			</div> -->
		</el-drawer>
	</div>
</template>
<script>
	import {
		ElMessage,
		ElMessageBox,
		ElDrawer,
		ElInput
	} from "element-plus";

	import {
		zhTranBody
	} from "@/api/stChinese.js";
	import {
		getCloumnList,
		bot_chat,
		userInfo,
		userLogout
	} from "@/api/sections";
	export default {

		props: ["active"],
		async setup() {
			const userStore = useUserStore();
			const robotClick = () => {
				userStore.page()
			}
			return {
				robotClick,
				userStore
			};
		},

		data() {
			return {
				showRobot: false,
				message: "",
				userInfo: {},
				historyList: [],
				navList: [],
			};
		},
		mounted: function() {

			if (this.$route.query.token) {

				userInfo({
					token: this.$route.query.token,
				}).then((res) => {
					localStorage.setItem(
						"userinfo",
						JSON.stringify(res.data.userinfo)
					);
					if (localStorage.getItem("userinfo")) {
						this.userInfo = JSON.parse(localStorage.getItem("userinfo"));
					}
				});
			}
			$(".openMenu").click(function() {
				$(".header").toggleClass("showmenu");
			});
			getCloumnList({
				id: 1418,
			}).then((res) => {
				console.log(res, 1111);
				this.navList = res.data;

				setTimeout(() => {
					zhTranBody();
				}, 100);
			});
			if (localStorage.getItem("userinfo")) {
				this.userInfo = JSON.parse(localStorage.getItem("userinfo"));
			}

			if (localStorage.getItem("historyList")) {
				this.historyList = JSON.parse(localStorage.getItem("historyList"));
			}


		},
		methods: {
			getTimeStr(t) {
				const time = new Date(t * 1000)
				const y = time.getFullYear() // 可返回一个表示年份的 4 位数字
				const m = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() +
					1 // 可返回表示月份的数字。返回值是 0（一月） 到 11（十二月） 之间的一个整数 // 注意： 一月为 0, 二月为 1, 以此类推。
				const d = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
				const h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
				const min = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
				const seconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
				return y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + seconds
			},
			toEn() {
				let href = window.location.href
				console.log(href.split('/cn/')[1], 121212)
				if (href.split('/cn/')[1]) {
					if (href.split('/cn/')[1].split('News/').length > 1) {
						window.location.href = "http://h9.gzwhir.com:1999/en/News"
					} else {
						window.location.href = "http://h9.gzwhir.com:1999/en/" + href.split('/cn/')[1]
					}
				} else {
					window.location.href = "http://h9.gzwhir.com:1999/en/"
				}
			},
			toLink(url) {
				window.location.href = '/cn' + url
			},
			toBottom() {
				const scrollContainer = document.getElementById("scrollContainer");

				scrollContainer.scrollTop = 999999;
			},
			toSend(e) {
				console.log(this.message, 121221);
				if (this.message.trim() == "") {
					ElMessage({
						message: "Please enter content",
						type: "error",
					});
					return;
				}
				if (!localStorage.getItem("userinfo")) {
					this.$router.push({
						path: `/login`,
					});
					return;
				}
				let item = {
					type: 1,
					value: this.message,
				};
				this.historyList.push(item);
				let post = {
					current_page:1,
					message: JSON.parse(JSON.stringify(this.message)),
				};
				if (localStorage.getItem("userinfo")) {
					this.userInfo = JSON.parse(localStorage.getItem("userinfo"));
					post.token = this.userInfo.token;
				}
				this.message = "";
				bot_chat(post).then((res) => {
					if (res) {
						if (res.data && res.data.length > 0) {
							let item1 = {
								type: 2,
								value: res.data[0].content,
							};
							this.historyList.push(item1);

							let curIndx = this.historyList.length - 1;
							res.data.some((it, idx) => {
								if (idx > 0) {
									setTimeout(() => {
										this.historyList[curIndx].value += it.content;
										this.toBottom();
									}, 100 * idx);
								}
							});
							this.message = "";
							localStorage.setItem(
								"chatMsgList",
								JSON.stringify(this.historyList)
							);
						}
					}
				});
			},
			toOut() {
				ElMessageBox.alert("Are you sure to exit", "Tips", {
					confirmButtonText: "OK",
					callback: (action) => {
						if (action == "confirm") {

							let loginForm = {};
								if (localStorage.getItem("loginForm")) {
									loginForm = JSON.parse(localStorage.getItem("loginForm"));
								}
								localStorage.clear();

								localStorage.setItem("loginForm", JSON.stringify(loginForm));
								this.$router.push({
									path: `/login`,
								});

							// userLogout({
							// 	token: this.userInfo.token,
							// }).then((res) => {
							// 	let loginForm = {};
							// 	if (localStorage.getItem("loginForm")) {
							// 		loginForm = JSON.parse(localStorage.getItem("loginForm"));
							// 	}
							// 	localStorage.clear();

							// 	localStorage.setItem("loginForm", JSON.stringify(loginForm));
							// 	this.$router.push({
							// 		path: `/login`,
							// 	});
							// });
						}
					},
				});
			},
		},
	};
</script>